<script setup lang="ts">
import { useEcharts } from "@/hooks/useEchartsDatav";
import { reactive } from "vue";

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title?: string;
    subtitle?: string;
    data?: number[]; // 曲线数据
    xAxisData?: string[]; // x轴数据
  }>(),
  {
    width: "100%",
    height: "250px",
    data: () => [],
  }
);

// 柱状图选项
const option = reactive({
  backgroundColor: "transparent",
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: "left",
    textStyle: {
      color: "#fff",
    },
  },
  grid: {
    left: "10%",
    top: "10%",
    right: "4%",
    bottom: "10%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-06", "11-07"],
    axisLabel: {
      color: "#fff",
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#fff",
    },
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      areaStyle: {},
    },
    {
      data: [420, 532, 201, 234, 290, 330, 320],
      type: "line",
      areaStyle: {},
    },
  ],
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <div
    ref="chartRef"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>

<style scoped></style>
